Kamwoo blog

HOC란

high order component란 인자로 컴포넌트를 전달받아 로직이나 다른 컴포넌트를 반환하는 함수를 말한다.

중복을 줄이고, context를 사용하거나 외부 데이터를 subscribe하는데에 많이 사용된다.

아래부터는 HOC를 사용할 수 있는 상황들에 대해서 설명한다.

이 챕터를 읽으면서 굳이 HOC를 써야되는 상황인지 의문이 들었다. 그동안 children을 제외한 HOC를 구현해서 사용해본 경험이 없기 때문. 각 상황에서 HOC가 좋은 방법인지 고민.

enhancing callback

반복되는 콜백, props를 넘겨야하는 경우에 HOC로 중복을 줄일 수있다.

1const Button = ({ onClick, loggingData }) => { 
2	const onButtonClick = () => {
3		log('Button was clicked', loggingData);
4		onClick(); 
5	};
6
7	return <button onClick={onButtonClick}>Click me</button>; 
8};

Button 컴포넌트에 onClick과 로깅할 데이터를 props로 넘기는 예제이고, 만약 button 뿐만아니라 다른 컴포넌트에서도 같은 동작을 넣기 위해서는 코드를 중복해서 작성해야 한다.

이러한 중복을 해결하기 위해서 아래와 같이 HOC를 만들어 사용할 수 있다.

1export const withLoggingOnClick = (Component) => { 
2	return (props) => {
3		const onClick = () => {
4			console.log('Log on click something');
5			props.onClick();
6		};
7	
8		return <Component {...props} onClick={onClick} />;
9	}; 
10};
11
12---
13export const ButtonWithLoggingOnClick = withLoggingOnClick(SimpleButton);
14
15<withLoggingOnClick >
16	<Component />
17</withLoggingOnClick>
18
19export const withLoggingOnClick = ({children}) => { 
20	const onClick = () => {}
21
22	const compoenent = React.cloneElement(chidlrem)
23
24	return compoenent
25};

위 방식보다는 children을 사용하는게 가독성에 좋다고 생각
각 HOC가 반환하는 값에 대해서 파악이 필요하다고 생각

adding data to the HOC

HOC로 리턴된 컴포넌트를 사용할 때, 데이터를 전달하는 방식에 대해서 설명한다.

컴포넌트 생성할 때, 필요한 데이터를 인자로 전달

1const ButtonWithLoggingOnClickWithParams = 
2		withLoggingOnClickWithParams(SimpleButton, {
3	    text: 'button component',
4	});

리턴된 컴포넌트에서 인자로 전달

1export const withLoggingOnClickWithProps = (Component) => {
2	return ({ logText, ...props }) => {
3		const onClick = () => {
4			console.log('Log on click: ', logText); 
5			props.onClick();
6		};
7
8		return <Component {...props} onClick={onClick} />; 
9	};
10};

Enhancing React lifecycle event

리액트 lifecycle을 사용하는 HOC에 대해서 설명

리렌더링이 발생했을 때, 로깅하는 HOC

1export const withLoggingOnReRender = (Component) => { 
2	return ({ id, ...props }) => {
3
4		useEffect(() => {
5			console.log('log on id change');
6		}, [id]);
7
8    return <Component {...props} />;
9  };
10};

Intercepting DOM event

keyboard 이벤트 제어에 대한 예제

1export const withSuppressKeyPress = (Component) => {
2	return (props) => {
3		const onKeyPress = (event) => {
4			event.stopPropagation(); 
5		};
6
7		return (
8				<div onKeyPress={onKeyPress}>
9			    <Component {...props} />
10	      </div>
11			); 
12	};
13};

React HOC

forwardRef